<template>
	<view>
		<uni-swipe-action>
			<block v-for="(item, i) in list" :key="item.goods_id">
				<uni-swipe-action-item :right-options="options" @click="delGoodsItem(item)">
					<van-card :price="item.goods_price" :title="item.goods_name">
						<view slot="thumb" class="custom-thumb">
							<radio :checked="item.goods_state" @click="setGoodsState(item)"></radio>
							<image :src="item.goods_small_logo"></image>
						</view>
						<view slot="num" style="text-align: end;">
							<van-stepper :value="item.goods_count" @change="changeNumber($event, item)" />
						</view>
					</van-card>
				</uni-swipe-action-item>

			</block>

		</uni-swipe-action>


	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	import tabbarMix from '@/mixins/tabbar.js'
	export default {
		name: "cart-list",
		mixins: [tabbarMix],
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				options: [{
					text: '取消',
					style: {
						backgroundColor: '#c00000'
					}
				}]
			};
		},
		methods: {
			...mapMutations('my_cart', ['setGoodsState', 'changeNum', 'delGoods']),
			changeNumber(e, item) {
				item.goods_count = e.detail - 0
				this.changeNum(item)
				this.setBadge()
			},
			delGoodsItem(item) {
				// console.log(item);
				this.delGoods(item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom-thumb {
		display: flex;
		align-items: center;

		image {
			width: 120rpx;
			height: 120rpx;
		}
	}
</style>
